<template>
  <div class="container">
    <div class="title">本周告警排行</div>

    <div class="tbody">
      <vue-seamless-scroll
        :class-option="defaultOption"
        :data="arr"
        v-show="arr.length > 0"
      >
        <div v-for="(item, index) in arr" :key="index" class="div_box">
          <div>
            {{ index + 1 }}
          </div>
          <div>
            <div class="title">
              <span
                >{{ item.orgName
                }}<span style="margin-left: 8px">{{ item.count }}</span></span
              >
              <!-- <span>60%</span> -->
              <span>{{ ((item.count / amount) * 100) | numFilter }}%</span>
            </div>
            <el-progress
              :percentage="(item.count / amount) * 100"
              :format="format"
              :stroke-width="7"
              :width="100"
            ></el-progress>
          </div>
        </div>
      </vue-seamless-scroll>
      <transition name="fade" mode="out-in">
        <div class="no-warn-info" v-show="arr.length <= 0">
          <img :src="wugj" />
          <div>暂无告警</div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
import { reqOrgAlarm } from "@api/apiDatav.js";
import { mapState } from "vuex";
import vueSeamlessScroll from "vue-seamless-scroll";

export default {
  components: {
    vueSeamlessScroll,
  },
  data() {
    return {
      arr: [],
      amount: 0, //总数
      wugj: require("@assets/images/datav/wugj.png"),
    };
  },
  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后两位
      let realVal = parseFloat(value).toFixed(2);
      return realVal;
    },
  },
  computed: {
    ...mapState(["user", "datav", "spacesManage"]),
    defaultOption() {
      return {
        step: 0.2, // 数值越大速度滚动越快
        limitMoveNum: 4, // 开始无缝滚动的数据量
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  watch: {
    // 当有实时告警，添加数据
    "datav.infoSent"(val) {
      // console.log(this.datav.msgList);
      this.arr.forEach((item) => {
        // console.log(item);
        if (this.datav.msgList.orgId == item.orgId) {
          item.count++;
          this.amount++; //总数
        }
      });
    },
  },
  methods: {
    format(percentage) {
      return "";
    },
    // 单位数量
    async getOrgAlarm() {
      let res = await reqOrgAlarm({
        tenantId: this.user.tenantId,
        roleName: this.user.roleName,
        userId: this.user.userId,
        orgId: this.spacesManage.organizationInfo.orgId,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      // console.log(res);
      if (res.data.row == null) return;
      this.amount = res.data.row.amount || 0;
      if (
        res.data.row.orgAlarmVOList &&
        res.data.row.orgAlarmVOList.length > 0
      ) {
        this.arr = res.data.row.orgAlarmVOList.sort((p1, p2) => {
          return p2.count - p1.count; // 降序排
        });
      }
    },
  },
  created() {},
  mounted() {
    this.getOrgAlarm();
  },
};
</script>

<style lang='less' scoped>
.fontSize (@px, @attr: font-size) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.lineHeight (@px, @attr: line-height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.width (@px, @attr: width) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.height (@px, @attr: height) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.top (@px, @attr: top) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.left (@px, @attr: left) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.right (@px, @attr: right) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.marginTop (@px, @attr: margin-top) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginBottom (@px, @attr: margin-bottom) {
  @vh: (@px / 1080) * 100;
  @{attr}: ~"@{vh}vh";
}

.marginLeft (@px, @attr: margin-left) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.marginRight (@px, @attr: margin-right) {
  @vw: (@px / 1920) * 100;
  @{attr}: ~"@{vw}vw";
}

.container {
  padding: 0 20px 15px 20px;
  box-sizing: border-box;
  height: 100%;
  .fontSize(16);

  > .title {
    .height(43);
    width: 60%;
    margin: 0 auto;
    .fontSize(16);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url("../../../assets/images/datav/head.png") no-repeat;
    background-size: 100% 100%;
    font-weight: 600;
  }
}

.tbody {
  width: 100%;
  height: 73%;
  overflow: hidden;
  .marginTop(15);

  .no-warn-info {
    width: 100%;
    height: 95%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-content: center;
    margin-top: 1.5%;
    color: #fff;
    font-size: 0.7vw;

    > img {
      width: 110px;
      height: 110px;
      margin-bottom: 10px;
    }
  }

  .div_box:nth-of-type(1) > div:first-of-type {
    background: url("../../../assets/images/paihang1.png") no-repeat;
    background-size: 100% 100%;
  }

  .div_box:nth-of-type(2) > div:first-of-type {
    background: url("../../../assets/images/paihang2.png") no-repeat;
    background-size: 100% 100%;
  }

  .div_box:nth-of-type(3) > div:first-of-type {
    background: url("../../../assets/images/paihang3.png") no-repeat;
    background-size: 100% 100%;
  }

  .div_box {
    .marginBottom(10);
    color: #fff;
    display: flex;
    align-items: center;
    width: 100%;
    .fontSize(12);

    > div:first-of-type {
      .width(25);
      .height(22);
      .lineHeight(22);
      background: url("../../../assets/images/paihang4.png") no-repeat;
      background-size: 100% 100%;
      padding-left: 0.3vw;
      box-sizing: border-box;
      .marginRight(9);
    }

    > div:last-of-type {
      flex: 1;

      .title {
        display: flex;
        justify-content: space-between;
        .marginBottom(3);
      }
    }
  }
}

//   进度条样式
::v-deep .el-progress-bar {
  padding-right: 0;
}

::v-deep .el-progress-bar__inner {
  background: #09e2f8;
}

::v-deep .el-progress-bar__outer {
  background: #0e36a9 !important;
}
</style>